<script setup lang="ts">
import { getCurrentInstance, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { navigateTo, uploadFile } from '@uni-helper/uni-promises'
import { get } from 'lodash-es'
import area from '../../../constant/china'
import cardDefault from '../../assets/image/bank-card/yhk.png'
import globalVariable from '../../../utils/globalVariable'
import user from '@/composables/user'
import { aliPayRegister, findUserInfo, insertBankCardNo, ocrOss } from '@/api/user/index'
import type { FindUserDto } from '@/api/user/type'

interface FormData {
    userName: string
    bankCardNo: string
    openBankAddress: string
    openBankBranch: string
    openBankCity: string
    bankCardImg: string
}

interface ExtraDataDto {
    isCollectBankCardImg: number | string
    isCollectOpenBankAddress: number | string
    isCollectOpenBankCity: number | string
    isCollectOpenBankName: number | string
}

const userInfo = ref<FindUserDto>({} as FindUserDto)

async function getUserInfo() {
    const res = await findUserInfo()
    userInfo.value = res
}
const formData = ref<FormData>({} as FormData)

const eventChannel = ref()

const extraData = ref<ExtraDataDto>({} as ExtraDataDto)

function onToBankList() {
    navigateTo({
        url: '/package-mine/pages/bank-list/bank-list',
    })
}

function toCameraIdCard(type: string) {
    uni.navigateTo({
        url: `/package-mine/pages/camera/camera?bgType=${type}`,
        events: {
            base64: async (data: {
                base64: string
            }) => {
                if (!data.base64)
                    return
                const res = await ocrOss({
                    idCard: data.base64,
                })
                if (type === 'front') {
                    if (!userInfo.value.userName || !userInfo.value.idCardNo || res.idCardInfo.name === userInfo.value.userName || res.idCardInfo.code === userInfo.value.idCardNo) {
                        userInfo.value.userName = res.idCardInfo.name
                        userInfo.value.idCardNo = res.idCardInfo.code
                        userInfo.value.ownIdCardFront = res.url
                    }
                    if (res.idCardInfo.name !== userInfo.value.userName && res.idCardInfo.code !== userInfo.value.idCardNo)
                        toast('身份证照片和当前身份信息不符')
                }
                else if (type === 'back') {
                    userInfo.value.ownIdCardBack = res.url
                }
            },
        },
    })
}

async function toCamera() {
    const eventChannel = await navigateTo({
        url: '/package-mine/pages/camera/camera?hint=请拍摄银行卡卡号面',
        events: {
            async base64(data: {
                base64: string
                tempPath?: string
            }) {
                const res = await uploadFile({
                    name: 'file',
                    fileType: 'image',
                    formData: {
                        user: 'test',
                    },
                    filePath: data.tempPath,
                    url: `${globalVariable.baseUrl}/api/v1/blue/user/upload`,
                    // 请求头一定要加，否则 iOS 图片上传会失败
                    header: {
                        'content-type': 'multipart/form-data',
                    },
                })
                formData.value.bankCardImg = JSON.parse(res.data).data.fileUrl
            },
        },
    })

    console.log(999, eventChannel.eventChannel)
}
function onCholseArea() {
    // #ifdef MP-ALIPAY
    my.multiLevelSelect({
        title: '请选择开户城市',
        list: area,
        success: (res) => {
            formData.value.openBankCity = `${res.result[0].name},${res.result[1].name}`
        },
    })
    // #endif
}

async function onEditInsertBankCardNo() {
    const res = await aliPayRegister(userInfo.value)
    if (res === 'needPhoto') {
        toast('身份证照片和当前身份信息不符')
        return
    }
    await user.login()
    await insertBankCardNo({
        userName: formData.value.userName,
        bankCardNo: formData.value.bankCardNo,
        openBankAddress: formData.value.openBankAddress ? formData.value.openBankAddress : '',
        openBankBranch: formData.value.openBankBranch ? formData.value.openBankBranch : '',
        openBankCity: formData.value.openBankCity ? formData.value.openBankCity : '',
        bankCardImg: formData.value.bankCardImg ? formData.value.bankCardImg : '',
        openBankName: formData.value.openBankAddress ? formData.value.openBankAddress : '',
    })
    await user.login()
    await uni.navigateBack()
}
const isCollectOpenBankCity = ref(false)
const isCollectOpenBankName = ref(false)
const showbankcardaddressflag = ref(false)
onLoad(async (options: any) => {
    showbankcardaddressflag.value = options.isshowCollectOpenBankAddress !== 0
    isCollectOpenBankName.value = !(options.isCollectOpenBankName === '0')
    isCollectOpenBankCity.value = !(options.isCollectOpenBankCity === '0')
    const instance = getCurrentInstance()
    eventChannel.value = get(instance, 'proxy.getOpenerEventChannel', new Function()).call(instance?.proxy)
    eventChannel.value.on('extraData', (data: AnyObject) => {
        extraData.value = data?.extraData || {}
    })
    await user.waitLogin()
    await getUserInfo()
    formData.value.userName = user.userInfo.value.userName
    formData.value.bankCardNo = user.userInfo.value.bankCardNo
    formData.value.openBankBranch = user.userInfo.value.openBankBranch
    formData.value.openBankCity = user.userInfo.value.openBankCity
    formData.value.openBankAddress = user.userInfo.value.openBankName
    formData.value.bankCardImg = user.userInfo.value.bankCardImg
})
onShow(() => {
    uni.$on('updateData', (data: string) => {
        formData.value.openBankAddress = data
    })
})
</script>

<template>
    <NavbarContainer>
        <view class="box-border px-30rpx">
            <view class="head">
                请确保身份证照片为本人的身份证
            </view>
            <view class="body topbac">
                <view class="title">
                    身份证信息
                </view>
                <view class="row row-box">
                    <view class="row-general">
                        姓名
                    </view>
                    <view class="row-general">
                        {{ userInfo.userName }}
                    </view>
                </view>
                <view class="row row-box">
                    <view class="row-general">
                        身份证号
                    </view>
                    <view class="row-general">
                        {{ userInfo.idCardNo }}
                    </view>
                </view>
            </view>

            <view class="body">
                <view class="title">
                    身份证信息
                </view>
                <view class="row">
                    <img class="card" :src="userInfo.ownIdCardFront || '../../../static/images/opinion/fanmian.png'" alt=""
                         @click="toCameraIdCard('front')">
                    <img class="card" :src="userInfo.ownIdCardBack || '../../../static/images//opinion/zhengmian.png'"
                         alt="" @click="toCameraIdCard('back')">
                </view>
                <view class="title" style="margin-top: 40rpx;">
                    拍摄要求
                </view>
                <view class="demolist" style="margin-top: 40rpx;">
                    <view class="item">
                        <view class="top">
                            <img class="iddemoimg" src="../../../static/images//idCard/idcard1.png" mode="widthFix">
                        </view>
                        <view class="bottom"><text style="color: #00D679;">√</text>标准拍摄</view>
                    </view>
                    <view class="item">
                        <view class="top">
                            <img class="iddemoimg" src="../../../static/images/idCard/idcard2.png" mode="widthFix">
                        </view>
                        <view class="bottom"><text style="color: #FF7642;">×</text>边框缺失</view>
                    </view>
                    <view class="item">
                        <view class="top">
                            <img class="iddemoimg" src="../../../static/images/idCard/idcard3.png" mode="widthFix">
                        </view>
                        <view class="bottom"><text style="color: #FF7642;">×</text>照片模糊</view>
                    </view>
                    <view class="item">
                        <view class="top">
                            <img class="iddemoimg" src="../../../static/images/idCard/idcard4.png" mode="widthFix">
                        </view>
                        <view class="bottom"><text style="color: #FF7642;">×</text>闪光强烈</view>
                    </view>
                </view>
            </view>
            <view class="mt-40rpx text-42rpx font-bold">
                提交银行卡
            </view>
            <view class="mt-15rpx text-xs text-gray">
                应该劳务公司要求，请您输入银行卡信息后领薪水
            </view>
            <view>
                <view class="mt-40rpx text-lg">
                    上传银行卡照片
                </view>
                <view class="mt-32rpx flex items-center justify-center">
                    <img class="h-365rpx w-556rpx"
                         :src="formData.bankCardImg === null || formData.bankCardImg === '' ? cardDefault : formData.bankCardImg"
                         alt="widthFix" @click="toCamera">
                </view>
            </view>
            <view>
                <uni-forms :model-value="formData" :border="true" err-show-type="toast">
                    <uni-forms-item label-width="100px" label="开户姓名" name="name">
                        <input v-model="formData.userName" class="border-none" type="text" placeholder="请输入开户姓名">
                    </uni-forms-item>
                    <uni-forms-item label-width="100px" label="银行卡号" name="name">
                        <input v-model="formData.bankCardNo" class="border-none" type="text" placeholder="请输入银行卡号">
                    </uni-forms-item>
                    <uni-forms-item v-if="isCollectOpenBankName" label-width="100px" label="开户银行" name="name">
                        <view class="box-border h-full flex items-center px-10rpx py-4rpx text-30rpx" @click="onToBankList">
                            {{ formData.openBankAddress ? formData.openBankAddress : '请选择开户银行' }}
                        </view>
                    </uni-forms-item>
                    <uni-forms-item v-if="isCollectOpenBankName" label-width="100px" label="开户行支行" name="name">
                        <input v-model="formData.openBankBranch" class="border-none" type="text"
                               placeholder="请输入支行名称，如XX支行">
                    </uni-forms-item>
                    <uni-forms-item v-if="isCollectOpenBankCity" label-width="100px" label="开户城市" name="name">
                        <view class="box-border h-full flex items-center px-10rpx py-4rpx text-30rpx" @click="onCholseArea">
                            {{ formData.openBankCity ? formData.openBankCity : '请选择开户城市' }}
                        </view>
                    </uni-forms-item>
                </uni-forms>
            </view>
            <button class="submit long-btn" @click="onEditInsertBankCardNo">
                提交
            </button>
        </view>
    </NavbarContainer>
</template>

<style scoped>
.long-btn {
    width: 670rpx;
    height: 94rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3e5ff5;
    border-radius: 47px;
    font-size: 36rpx;
    color: white;
    margin-top: 60rpx;
    font-weight: 400;
    box-shadow: unset !important;
}

.row-box {
    padding-top: 30rpx;
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container {
    background: #FAFAFC;
    height: 100vh;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.head {
    font-size: 36rpx;
    color: #202536;
    padding: 60rpx 0;
    font-weight: bold;
}

.body {
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    background: #ffffff;
    margin-bottom: 30rpx;
}

.title {
    color: #151718;
    font-size: 32rpx;
    font-weight: 600;
}

.row-box {
    padding-top: 30rpx;
}

.row-general {
    color: #565868;
    font-size: 28rpx;
}

.card {
    width: 296rpx;
    height: 190rpx;
    margin-top: 32rpx;
    border-radius: 12rpx;
}

.demolist {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.demolist .item {
    width: 22%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.demolist .item .top {
    width: 100%;
    height: 100rpx;
}

.topbac {
    background: linear-gradient(109deg, #D5F4FF -4%, #F9EEF1 49%, #D5F4FF 100%);
}

.iddemoimg {
    width: 100%;
    height: 100%;
}

.demolist .item .bottom {
    margin-top: 20rpx;
    color: #565868;
    font-size: 24rpx;
}
</style>

<route lang="json">
{
    "layout": "default"
}
</route>
